<template>
  <div>
    <van-nav-bar left-arrow>
      <!-- <template #left>
        <van-icon name="arrow-left" @click="$router.back()" />
      </template> -->
      <template #title>
        <h3>请您确认订单</h3>
      </template>
    </van-nav-bar>

    <div class="hd">
      <div class="left">
        <van-col>
          <van-image
            round
            width="3rem"
            height="3rem"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
          />
        </van-col>
        <van-col>
          <p>手机尾号：1234</p>
          <p>暂无车型记录</p>
        </van-col>
      </div>
      <div class="right">
        <van-col class="r">
          <van-image
            round
            width="3rem"
            height="3rem"
            src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3000016445,3641315424&fm=26&gp=0.jpg"
          />
        </van-col>
      </div>
    </div>

    <div class="detail">
      <div class="price">
        <span>33</span><span style="font-size: 16px">元</span>
      </div>
      <p>里程8.8公里----------------------11.5元</p>
      <p>超里程0.8公里--------------------0.8元</p>
      <p>时长28分钟------------------------9.8元</p>
    </div>

    <div class="two">
      <div class="all">
        <van-col
          ><span class="ex">高速费</span
          ><span>------------------</span></van-col
        >
        <van-col>
          <van-stepper
            v-model="value"
            theme="round"
            button-size="22"
            disable-input
        /></van-col>
      </div>

      <div class="all">
        <van-col
          ><span class="ex">停车费</span
          ><span>------------------</span></van-col
        >
        <van-col>
          <van-stepper
            v-model="value"
            theme="round"
            button-size="22"
            disable-input
        /></van-col>
      </div>

      <div class="all">
        <van-col
          ><span class="ex">路桥费</span
          ><span>------------------</span></van-col
        >
        <van-col>
          <van-stepper
            v-model="value"
            theme="round"
            button-size="22"
            disable-input
        /></van-col>
      </div>

      <div class="all">
        <van-col
          ><span class="ex" style="padding-right: 16px">其他</span
          ><span>------------------</span></van-col
        >
        <van-col>
          <van-stepper
            v-model="value"
            theme="round"
            button-size="22"
            disable-input
        /></van-col>
      </div>
    </div>

    <button @click="pay">确认收款</button>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { Dialog } from "vant";
export default {
  computed: {
    ...mapState(["myMoney"]),
  },
  data() {
    return {
      value: 1,
      money: 33,
    };
  },
  methods: {
    pay() {
      Dialog.confirm({
        title: "",
        message: "请您确认费用无误，并提示乘客先付款后下车",
      })
        .then(() => {
          const money = Math.round(this.money * 0.8);
          this.$store.commit("chong", money);
          console.log(this.myMoney);
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.hd {
  width: 95%;
  height: 100px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border: 1px solid #999;
  border-radius: 10px;
  margin: 20px auto;

  p {
    padding: 5px 0;
  }
}
.van-col {
  margin: 5px 10px;
}
.hd p {
  font-size: 12px;
  color: #555;
}
.r {
  margin-left: 65px;
}

.detail {
  text-align: center;
  padding: 30px 0;
  border: 1px solid #999;
  border-radius: 10px;
  width: 95%;
  margin: 20px auto;
  .price {
    font-size: 40px;
    text-align: center;
    padding-bottom: 20px;
  }
  p {
    font-size: 16px;
    padding: 5px 0;
    color: #555;
  }
}

.two {
  width: 95%;
  height: 200px;
  border: 1px solid #999;
  border-radius: 10px;
  margin: 0 auto;
  .all {
    width: 100%;
    height: 30px;
    padding: 10px 0;
    .ex {
      padding: 10px 0 5px 65px;
      color: #555;
    }
  }
}
button {
  background-color: orange;
  border: 1px solid orange;
  border-radius: 5px;
  color: #fff;
  width: 95%;
  height: 40px;
  margin: 40px 0 0 10px;
}
</style>